<template>
    <div id="app" class="eventHeadle">
        <div class="elementCl">
            <div v-grag="{top:ResTop,left:ResLeft}" class="elementResout" v-bind:style="{top:ResTop,left:ResLeft}" @click="elementResout">
                复位
            </div>
            <div class="elementStart" @mousedown="mousedownClickOne(0,$event)" @mousemove="mousemoveClickOne(0,$event)" @mouseup="mouseupClickOne(0,$event)"
                @mouseout="mouseoutClick" v-bind:style="{top:mou1.Top1,left:mou1.Left1}">开始
        </div>
        <div class="elementArrows" @mousedown="mousedownClickArrows(1,$event)" @mousemove="mousemoveClickArrows(1,$event)" @mouseup="mouseupClickArrows(1,$event)"
            @mouseout="mouseoutClick" v-bind:style="{top:mou2.Top2,left:mou2.Left2}">箭头
    </div>

    <div class="elementUp" @mousedown="mousedownClickUp(2,$event)" @mousemove="mousemoveClickUp(2,$event)" @mouseup="mouseupClickUp(2,$event)"
        @mouseout="mouseoutClick" v-bind:style="{top:mou3.Top3,left:mou3.Left3}">加载
        </div>
        <div class="elementEnd" @mousedown.self="mousedownClickEnd(3,$event)" @mousemove.self="mousemoveClickEnd(3,$event)" @mouseup.self="mouseupClickEnd(3,$event)"
            @mouseout="mouseoutClick" v-bind:style="{top:mou4.Top4,left:mou4.Left4}">结束
            </div>
            <div class="elementErr" @mousedown.self="mousedownClickErr(4,$event)" @mousemove.self="mousemoveClickErr(4,$event)" @mouseup.self="mouseupClickErr(4,$event)"
                @mouseout="mouseoutClick" v-bind:style="{top:mou5.Top5,left:mou5.Left5}">错误
                </div>
                <div class="paletteCl">
                    <!--画板-->
                </div>
                </div>
                </div>
</template>

<script>
    import { mapActions } from 'vuex'
    export default {
        name: 'eventHeadle',
        data() {
            return {
                ResTop: '5px',
                ResLeft: '25px',
                mou1: {
                    flag1: false,
                    initX1: 0,
                    initY1: 0,
                    mouseDownX1: 0,
                    mouseDownY1: 0,
                    Top1: '45px',
                    Left1: '25px',
                },
                mou2: {
                    flag2: false,
                    initX2: 0,
                    initY2: 0,
                    mouseDownX2: 0,
                    mouseDownY2: 0,
                    Top2: '150px',
                    Left2: '25px'
                },
                mou3: {
                    flag3: false,
                    initX3: 0,
                    initY3: 0,
                    mouseDownX3: 0,
                    mouseDownY3: 0,
                    Top3: '250px',
                    Left3: '25px'
                },
                mou4: {
                    flag4: false,
                    initX4: 0,
                    initY4: 0,
                    mouseDownX4: 0,
                    mouseDownY4: 0,
                    Top4: '360px',
                    Left4: '25px'
                },
                mou5: {
                    flag5: false,
                    initX5: 0,
                    initY5: 0,
                    mouseDownX5: 0,
                    mouseDownY5: 0,
                    Top5: '460px',
                    Left5: '25px'
                }
            }
        },
        created: function () {

        },
        filters: {
            ctimeFun: function (val) {
                var now = new Date(val)
                var year = now.getYear() - 100;
                var month = now.getMonth() + 1;
                month = month > 9 ? month : "0" + month
                var date = now.getDate();
                date = date > 9 ? date : "0" + date
                var hour = now.getHours();
                hour = hour > 9 ? hour : "0" + hour
                var minute = now.getMinutes();
                minute = minute > 9 ? minute : "0" + minute
                return "20" + year + "-" + month + "-" + date + "   " + hour + ":" + minute;
            }
        },
        methods: {
            elementResout() {
                this.mou1.Left1 = '25px'
                this.mou1.Top1 = '45px'
                this.mou2.Left2 = '25px'
                this.mou2.Top2 = '150px'
                this.mou3.Left3 = '25px'
                this.mou3.Top3 = '250px'
                this.mou4.Left4 = '25px'
                this.mou4.Top4 = '360px'
                this.mou5.Left5 = '25px'
                this.mou5.Top5 = '460px'
            },
            // 开始
            mousedownClickOne(cot, event) {
                this.mou1.mouseDownX1 = event.clientX
                this.mou1.mouseDownY1 = event.clientY
                this.mou1.initX1 = event.target.offsetLeft;
                this.mou1.initY1 = event.target.offsetTop;
                this.mou1.flag1 = true
            },
            mousemoveClickOne(cot, event) {
                if (this.mou1.flag1) {
                    console.log('ee')
                    this.mou1.Left1 = (event.clientX - this.mou1.mouseDownX1 + this.mou1.initX1) + 'px'
                    this.mou1.Top1 = (event.clientY - this.mou1.mouseDownY1 + this.mou1.initY1) + 'px'
                }
            },
            mouseupClickOne(cot, event) {
                this.mou1.mouseDownX1 = 0
                this.mou1.mouseDownY1 = 0
                this.mou1.flag1 = false
            },
            // 箭头
            mousedownClickArrows(cot, event) {
                this.mou2.mouseDownX2 = event.clientX
                this.mou2.mouseDownY2 = event.clientY
                this.mou2.initX2 = event.target.offsetLeft;
                this.mou2.initY2 = event.target.offsetTop;
                this.mou2.flag2 = true
            },
            mousemoveClickArrows(cot, event) {
                if (this.mou2.flag2) {
                    this.mou2.Left2 = (event.clientX - this.mou2.mouseDownX2 + this.mou2.initX2) + 'px'
                    this.mou2.Top2 = (event.clientY - this.mou2.mouseDownY2 + this.mou2.initY2) + 'px'
                }
            },
            mouseupClickArrows(cot, event) {
                this.mou2.mouseDownX2 = 0
                this.mou2.mouseDownY2 = 0
                this.mou2.flag2 = false
            },
            // 加载
            mousedownClickUp(cot, event) {
                this.mou3.mouseDownX3 = event.clientX
                this.mou3.mouseDownY3 = event.clientY
                this.mou3.initX3 = event.target.offsetLeft;
                this.mou3.initY3 = event.target.offsetTop;
                this.mou3.flag3 = true
            },
            mousemoveClickUp(cot, event) {
                if (this.mou3.flag3) {
                    this.mou3.Left3 = (event.clientX - this.mou3.mouseDownX3 + this.mou3.initX3) + 'px'
                    this.mou3.Top3 = (event.clientY - this.mou3.mouseDownY3 + this.mou3.initY3) + 'px'
                }
            },
            mouseupClickUp(cot, event) {
                this.mou3.mouseDownX3 = 0
                this.mou3.mouseDownY3 = 0
                this.mou3.flag3 = false
            },
            // 结束
            mousedownClickEnd(cot, event) {
                this.mou4.mouseDownX4 = event.clientX
                this.mou4.mouseDownY4 = event.clientY
                this.mou4.initX4 = event.target.offsetLeft;
                this.mou4.initY4 = event.target.offsetTop;
                this.mou4.flag4 = true
            },
            mousemoveClickEnd(cot, event) {
                if (this.mou4.flag4) {
                    this.mou4.Left4 = (event.clientX - this.mou4.mouseDownX4 + this.mou4.initX4) + 'px'
                    this.mou4.Top4 = (event.clientY - this.mou4.mouseDownY4 + this.mou4.initY4) + 'px'
                }
            },
            mouseupClickEnd(cot, event) {
                this.mou4.mouseDownX4 = 0
                this.mou4.mouseDownY4 = 0
                this.mou4.flag4 = false
            },
            // 错误
            mousedownClickErr(cot, event) {
                this.mou5.mouseDownX5 = event.clientX
                this.mou5.mouseDownY5 = event.clientY
                this.mou5.initX5 = event.target.offsetLeft;
                this.mou5.initY5 = event.target.offsetTop;
                this.mou5.flag5 = true
            },
            mousemoveClickErr(cot, event) {
                if (this.mou5.flag5) {
                    this.mou5.Left5 = (event.clientX - this.mou5.mouseDownX5 + this.mou5.initX5) + 'px'
                    this.mou5.Top5 = (event.clientY - this.mou5.mouseDownY5 + this.mou5.initY5) + 'px'
                }
            },
            mouseupClickErr(cot, event) {
                this.mou5.mouseDownX5 = 0
                this.mou5.mouseDownY5 = 0
                this.mou5.flag5 = false
            },
            mouseoutClick() {
                this.mou1.flag1 = false
                this.mou2.flag2 = false
                this.mou3.flag3 = false
                this.mou4.flag4 = false
                this.mou5.flag5 = false
                console.log('离开了')
            }
        }
    }

</script>

<style scoped>
    .eventHeadle {
        width: 100%;
        min-height: 600px;
        height: 100%;
        display: flex;
        overflow: hidden;
    }
    
    .elementCl {
        width: 100%;
        height: 100%;
        min-height: 600px;
        border: 1px solid #ccc;
        position: relative;
        border: 1px solid #ccc;
        color: #fff;
    }
    
    .elementResout {
        text-align: center;
        cursor: pointer;
        position: absolute;
        border: 1px solid #ccc;
        z-index: 10000;
        width: 200px;
        height: 30px;
        line-height: 30px;
        color: #000;
        border-radius: 5px;
        z-index: 1000000000000000000000;
        background-color: #fff;
        user-select: none;
    }
    
    .elementStart {
        width: 200px;
        height: 90px;
        text-align: center;
        line-height: 100px;
        cursor: pointer;
        position: absolute;
        border: 1px solid red;
        z-index: 10000;
        background-color: red;
        user-select: none;
    }
    
    .elementArrows {
        position: absolute;
        width: 200px;
        height: 90px;
        text-align: center;
        line-height: 100px;
        cursor: pointer;
        border: 1px solid red;
        background-color: rgb(0, 0, 0);
        user-select: none;
        z-index: 10000;
    }
    
    .elementUp {
        position: absolute;
        width: 200px;
        height: 90px;
        text-align: center;
        line-height: 100px;
        cursor: pointer;
        border: 1px solid red;
        user-select: none;
        background-color: #555;
        z-index: 10000;
    }
    
    .elementEnd {
        position: absolute;
        width: 200px;
        height: 90px;
        text-align: center;
        line-height: 100px;
        user-select: none;
        cursor: pointer;
        border: 1px solid red;
        z-index: 10000;
        background-color: #123456;
    }
    
    .elementErr {
        position: absolute;
        width: 200px;
        height: 90px;
        text-align: center;
        line-height: 100px;
        user-select: none;
        cursor: pointer;
        border: 1px solid red;
        z-index: 10000;
        background-color: green;
    }
    
    .paletteCl {
        position: absolute;
        top: 0px;
        left: 250px;
        width: calc(100% - 270px);
        min-height: 600px;
        height: 100%;
        border-right: 1px solid #333;
        border-left: 1px solid #333;
        border: 1px solid #000;
    }
</style>